﻿<svg data-color="@Color" class="player-bars @(IsPaused ? "paused" : "")" width="38" height="28" viewBox="0 0 38 28" fill="none" xmlns="http://www.w3.org/2000/svg">
	<rect opacity="0.6" x="3" y="17" width="2" height="11"/>
	<rect opacity="0.75" x="6" y="11" width="2" height="17"/>
	<rect x="9" y="4" width="2" height="24"/>
	<rect opacity="0.9" x="12" y="9" width="2" height="19"/>
	<rect opacity="0.9" x="15" y="8" width="2" height="20"/>
	<rect opacity="0.8" x="18" y="11" width="2" height="17"/>
	<rect opacity="0.9" x="21" y="6" width="2" height="22"/>
	<rect opacity="0.6" x="24" y="14" width="2" height="14"/>
	<rect x="27" y="4" width="2" height="24"/>
	<rect opacity="0.8" x="30" y="11" width="2" height="17"/>
	<rect opacity="0.6" x="33" y="17" width="2" height="11"/>
	<rect opacity="0.5" x="36" y="22" width="2" height="6"/>
</svg>

@code {
	[EditorRequired]
    [Parameter]
    public string Color { get; set; } = default!;
	
	[EditorRequired]
    [Parameter]
    public bool IsPaused { get; set; } = false;
}
